<template>
  <div>
    <div class="qa-title">
      <span>
        <b class="t2">{{d.writeFlag==1 ? '*':''}}</b>
        {{index + 1}}.{{d.titleName}}</span>
    </div>
    <div class="qa-content">
      <!-- // 单选答案 下拉 -->
      <template v-if="d.widgetType == 1 || d.widgetType ==3 " v-for="(r, index) in d.options">
        <mu-radio :disabled="isAnswered" :label="r.optionContent" :key="index" :nativeValue="r.optionId" v-model="d.model" />
      </template>

      <!-- // 多选-->
      <template v-if="d.widgetType == 2" v-for="(r, index) in d.options">
        <mu-checkbox :disabled="isAnswered" :label="r.optionContent" :key="index" :nativeValue="r.optionId" v-model="d.model" />
        <br :key="index" />
        
      </template>

      <!-- // 单项填空 -->
      <template v-if="d.widgetType == 6">
          <div :key="index">
            <mu-text-field
            :disabled="isAnswered"
              hintText="请输入..."
              class="input-bordered"
              :key="index"
              v-model="d.model"
            />
            <br />
          </div>
      
      </template>
    </div>
  </div>
</template>

<script>
const QA_TYPE = {
  radio: "单选",
  checkbox: "多选",
  input: "填空"
};
// import QaItem from "./QaItem";
export default {
  name: "qa-item",
  props: ["d", 'index', 'isAnswered'],
  data() {
    return {
      QA_TYPE: QA_TYPE
    };
  },
  // components: { QaItem }
};
</script>

<style lang="less" scoped>
.children-content {
  border: 1px solid #f5f5f5;
  margin: 0.8em 0;
  padding: 0 0.3em;
  /* border-left: 2px solid #ddd; */
  /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); */
}
.mu-text-field {
  width: auto;
}
.mu-radio {
  display: block;
  margin: 10px 0;
}
.qa-label {
  height: 18px;
  width: 40px;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  padding-left: 8px;
  &.qa-label-radio {
    background-image: url(../assets/images/tab_单选@2x.png);
    background-size: cover;
  }
  &.qa-label-checkbox {
    background-image: url(../assets/images/tab_多选@2x.png);
    background-size: cover;
  }
  &.qa-label-input {
    background-image: url(../assets/images/tab_填空@2x.png);
    background-size: cover;
  }
}
.qa-content {
  padding-top: 10px;
}
</style>
